// App.vue (vue)
import { Component } from "react"
import logo from './logo.svg';
import './App.css';
import Counter from "./components/Counter";
import TodoList from "./components/TodoList";
import MarkdownEditor from "./components/MarkdownEditor";

class App extends Component {
  // ...options
  constructor(props) {
    super(props);
    this.state = {
      seconds: 0
    }
  }

  componentDidMount() {
    // this.timer = setInterval(() => {
    //   this.setState({
    //     seconds: this.state.seconds + 1
    //   })
    // }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }
  // 单页面应用，定时器 在卸载组件的时候一定要清楚定时器

  render() {
    return (
      <>
        <h1>hello react</h1>
        <MarkdownEditor/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <hr/>
        <h1>seconds: {this.state.seconds}</h1>
        <button>stop</button>
        <hr/>
        <TodoList/>
        <hr/>
        <Counter title={"first"} />
        <Counter title={"第二个"}/>
        <Counter title={"第3个"}/>
        <Counter/>
      </>
    );
  }
}

export default App;
